<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Are you tired of Bootstrap? Get started with Metro 4, the popular framework for building responsive, mobile-first sites in Metro style, with the Metro CDN and a template starter page. The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Metro 4 - Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">
    <div class="container-fluid bg-brandColor2">
        <header class="container topbar topbar-expand-sm">
            <a href="/" class="topbar-brand fg-white border bd-white border-radius pr-2 pl-2">m<sup>4</sup></a>
            <ul class="topbar-menu ml-2-sm">
                <li><a href="index-old.html">Home</a></li>
                <li><a href="intro.html">Guide</a></li>
                <li><a href="examples.html">Examples</a></li>
                <li class="d-none"><a href="#">Builder</a></li>
                <li><a href="sponsors-old.html">Sponsors</a></li>
                <li class="d-block d-none-md"><a href="https://github.com/olton/Metro-UI-CSS" target="_blank">Github</a></li>
            </ul>
            <ul class="topbar-menu d-none d-flex-md" style="margin-left: auto">
                <li><a href="https://github.com/olton/Metro-UI-CSS" target="_blank"><span class="mif-github mif-2x"></span></a></li>
            </ul>
        </header>
    </div>

    <div id="spider-navigator">
        <ul class="inline-list">
            <li class="done"><a href="intro.html">Introduction</a></li>
            <li class="done"><a href="download.html">Download</a></li>
            <li class="done"><a href="contents.html">Contents</a></li>
            <li class="done"><a href="browsers.html">Browsers &amp; devices</a></li>
            <li class="done"><a href="media.html">Media breakpoints</a></li>
            <li class="done"><a href="events.html">Define Events</a></li>
            <li class="done"><a href="i18n.html">i18n</a></li>
            <li class="done"><a href="configuring.html">Configuring</a></li>
            <li class="done"><a href="vuejs.html">Configuring</a></li>
            <li class="done"><a href="containers.html">Containers</a></li>
            <li class="done"><a href="grid.html">Grid system</a></li>
            <li class="done"><a href="typography.html">Typography</a></li>
            <li class="done"><a href="tables.html">Tables</a></li>
            <li class="done"><a href="forms.html">Forms</a></li>
            <li class="done"><a href="buttons.html">Buttons</a></li>
            <li class="done"><a href="images.html">Images</a></li>
            <li class="done"><a href="figures.html">Figures</a></li>
            <li class="done"><a href="app-bar.html">App bar</a></li>
            <li class="done"><a href="sidenavigation.html">Side navigation</a></li>
            <li class="done"><a href="menu.html">Menu</a></li>
            <li class="done"><a href="ribbon-menu.html">Ribbon Menu</a></li>
            <li class="done"><a href="accordion.html">Accordion</a></li>
            <li class="done"><a href="tabs.html">Tabs</a></li>
            <li class="done"><a href="master.html">Master</a></li>
            <li class="done"><a href="keypad.html">Keypad</a></li>
            <li class="done"><a href="treeview.html">TreeView</a></li>
            <li class="done"><a href="listview.html">ListView</a></li>
            <li class="done"><a href="slider.html">Slider</a></li>
            <li class="done"><a href="stepper.html">Stepper</a></li>
            <li class="done"><a href="wizard.html">Wizard</a></li>
            <li class="done"><a href="navview.html">Navigation View</a></li>
            <li class="done"><a href="charms.html">Charms</a></li>
            <li class="done"><a href="tiles.html">Tiles</a></li>
            <li class="done"><a href="carousel.html">Carousel</a></li>
            <li class="done"><a href="popovers.html">Popovers</a></li>
            <li class="done"><a href="panels.html">Panels</a></li>
            <li class="done"><a href="cards.html">Cards</a></li>
            <li class="done"><a href="rating.html">Rating</a></li>
            <li class="done"><a href="progress.html">Progress &amp; Activity</a></li>
            <li class="done"><a href="donut.html">Donut</a></li>
            <li class="done"><a href="streamer.html">Streamer</a></li>
            <li class="done"><a href="ripple.html">Ripple</a></li>
            <li class="done"><a href="storage.html">Storage</a></li>
            <li class="done"><a href="gravatar.html">Gravatar</a></li>
            <li class="done"><a href="cube.html">Cube</a></li>
            <li class="done"><a href="hints.html">Hints</a></li>
            <li class="done"><a href="toast.html">Toasts</a></li>
            <li class="done"><a href="notify.html">Notify system</a></li>
            <li class="done"><a href="dialog.html">Dialogs</a></li>
            <li class="done"><a href="windows.html">Windows</a></li>
            <li class="done"><a href="calendar.html">Calendar</a></li>
            <li class="done"><a href="calendarpicker.html">Calendar picker</a></li>
            <li class="done"><a href="datepicker.html">Date picker</a></li>
            <li class="done"><a href="timepicker.html">Time picker</a></li>
            <li class="done"><a href="countdown.html">Countdown</a></li>
            <li class="done"><a href="dateformat.html">Formatting date</a></li>
            <li class="done"><a href="video.html">Video player</a></li>
            <li class="done"><a href="audio.html">Audio player</a></li>
            <li class="done"><a href="dropdown.html">Dropdown</a></li>
            <li class="done"><a href="collapse.html">Collapse</a></li>
            <li class="done"><a href="validator.html">Form validator</a></li>
            <li class="done"><a href="draggable.html">Draggable</a></li>
            <li class="done"><a href="hotkeys.html">Hotkeys</a></li>
            <li class="done"><a href="scroll-events.html">Scroll events</a></li>
            <li class="done"><a href="mouse-wheel.html">Mouse wheel</a></li>
            <li class="done"><a href="micro-tpl.html">Micro templates</a></li>
            <li class="done"><a href="color-module.html">Color module</a></li>
            <li class="done"><a href="clear.html">Clear float</a></li>
            <li class="done"><a href="colors.html">Colors</a></li>
            <li class="done"><a href="display.html">Display &amp; visibility</a></li>
            <li class="done"><a href="embed.html">Embed</a></li>
            <li class="done"><a href="flex.html">Flex</a></li>
            <li class="done"><a href="float.html">Float</a></li>
            <li class="done"><a href="position.html">Position</a></li>
            <li class="done"><a href="sizing.html">Sizing</a></li>
            <li class="done"><a href="spacing.html">Spacing</a></li>
            <li class="done"><a href="border.html">Border</a></li>
            <li class="done"><a href="easing.html">Easing</a></li>
            <li class="done"><a href="ani-elements.html">Animations</a></li>
            <li class="done"><a href="extensions.html">Extensions</a></li>
            <li class="done"><a href="functions.html">Functions</a></li>
            <li class="done"><a href="icons.html">Metro Icon Font</a></li>
            <li class="done"><a href="color-schemes.html">Color Schemes</a></li>
        </ul>
    </div>

    <div class="container-fluid" id="hero-wrapper">
        <div class="container hero pt-md-3 pb-md-3">
            <div class="row flex-align-center">
                <div class="cell-md-6 order-md-2">
                    <div class="img-container p-4-md">
                        <img src="images/logo.png">
                    </div>
                    <div class="text-center">
                        <div class="info-button">
                            <a href="https://github.com/olton/Metro-UI-CSS" class="button"><span class="mif-eye"></span> Watch</a>
                            <a href="https://github.com/olton/Metro-UI-CSS/watchers" class="info" id="github-watch">589</a>
                        </div>

                        <div class="info-button">
                            <a href="https://github.com/olton/Metro-UI-CSS" class="button"><span class="mif-star-full"></span> Star</a>
                            <a href="https://github.com/olton/Metro-UI-CSS/stargazers" class="info" id="github-star">5,546</a>
                        </div>

                        <div class="info-button mt-1 mt-0-md">
                            <a href="https://github.com/olton/Metro-UI-CSS" class="button"><span class="mif-flow-tree"></span> Fork</a>
                            <a href="https://github.com/olton/Metro-UI-CSS/network" class="info" id="github-fork">1,841</a>
                        </div>
                    </div>
                </div>
                <div class="cell-md-6 p-md-5 text-center text-left-md">
                    <h1 class="d-none d-block-md">Metro 4</h1>
                    <p class="text-leader">
                        <strong>Are you tired of Bootstrap or did not fall in love it?</strong>
                        <br />
                        Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style.
                    </p>
                    <p class="text-leader2">
                        Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .
                    </p>
                    <div class="row flex-justify-around mt-4">
                        <a href="intro.html" class="cell button brand1 same-color outline large m-1 success">Get started</a>
                        <a href="download.html" class="cell button outline large m-1 success">Download</a>
                        <a href="https://www.patreon.com/bePatron?u=8975658" class="cell button outline large m-1 alert">Become a Patron</a>
                    </div>
                    <p class="text-small mt-2">Currently <span class="version-number"></span></p>
                    <div class="mt-4">
                        <hr/>
                        <ul class="inline-list">
                            <li>Previous version:</li>
                            <li><a href="https://github.com/olton/Metro-UI-CSS/tree/metrouicss-0.95">v0.x</a></li>
                            <li><a href="https://github.com/olton/Metro-UI-CSS/tree/metrouicss-2x">v2.x</a></li>
                            <li><a href="https://github.com/olton/Metro-UI-CSS/tree/metrouicss-3x">v3.x</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="container-fluid pt-5 pb-3 pl-0 pr-0 bg-grayWhite">
        <div class="container">
            <div class="row">
                <div class="cell-md-6">
                    <ul class="inline-list h-menu no-hover bg-grayWhite" style="margin-left: -.5rem">
                        <li><a href="https://github.com/olton/Metro-UI-CSS">Github</a></li>
                        <li><a href="https://www.facebook.com/metrouicss/">Facebook</a></li>
                        <li><a href="https://github.com/olton/Metro-UI-CSS/issues">Issues</a></li>
                        <li><a href="https://www.patreon.com/metroui">Donate</a></li>
                    </ul>
                    <p class="mt-0">
                        Metro 4 (Metro UI CSS) &copy; 2012-2018 by <a href="mailto:sergey@pimenov.com.ua" class="no-wrap">Sergey Pimenov</a>.
                        <br />
                        <span class="no-wrap">Domain by <a href="https://imena.ua/">Imena.ua</a>.</span>
                        <span class="no-wrap">Hosting by <a href="https://mirohost.net/">Mirohost</a>.</span>
                        <span class="no-wrap">Metro CDN by <a href="https://www.keycdn.com/">KeyCDN</a>.</span>
                        <span class="no-wrap">IDE PhpStorm by <a href="https://www.jetbrains.com/">JetBrains</a>.</span>
                        <br />
                        Currently <span class="version-number"></span>. Code licensed <a href="https://github.com/olton/Metro-UI-CSS/blob/master/LICENSE">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
                    </p>
                </div>
                <div class="cell-md-6">
                    <!-- ads-html -->
                </div>
            </div>
        </div>
    </footer>



    <script src="metro/js/metro.js?ver=@@b-version"></script>

    <script src="particles/particles.min.js"></script>
    <script>
        particlesJS.load('hero-wrapper', 'particles/particles.json', function(){});
        $(".version-number").html(Metro.ver());

        setTimeout(function(){
            var b = $(".adsbygoogle");
            var h = 0;
            $.each(b, function(){
                var bl = $(this);
                if (bl.height() < 50 || Metro.utils.getStyleOne(bl, 'display') === 'none') {
                    bl.parent().html("<div class='bg-red fg-white p-4 text-center h3 text-light'>With your help, I can make Metro 4 even better! Please, disable AdBlock or AdGuard. Thank you for support!</div>");
                }
            });
        }, 1000);

        Metro.utils.github("olton/Metro-UI-CSS", function(data){
            $("#github-fork").text(Number(data.forks).format(0, 0, ","));
            $("#github-star").text(Number(data.stargazers_count).format(0, 0, ","));
            $("#github-watch").text(Number(data.subscribers_count).format(0, 0, ","));
            $("#github-owner").text(data.owner.login);
            $("#github-project").text(data.name);
        })
    </script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>